<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HomePage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/js/jquery-2.1.1.min.js"><\/script>')</script>

    <!-- 引入Vue -->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/css/elementui.css">
    <!-- 引入组件库 -->
    <script src="/js/elementui.js"></script>
    <!-- 引入axios -->
    <script src="/js/axios.js"></script>

    <link rel="stylesheet" media="screen" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="/css/home.css"/>
</head>
<body>
<div id="particles-js">

</div>
<div id="app">
    <div class="main-box">
        <div class="title-box">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">处理中心</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">我的工作台</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
            </el-menu>
        </div>
        <div class="body-box">
            <template>
                <el-table
                        :data="info"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="deptNo"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="deptName"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="deptLocation"
                            label="级别">
                    </el-table-column>
                </el-table>
            </template>
        </div>
    </div>
</div>
</body>
<!-- scripts -->
<script src="/js/particles.min.js"></script>
<script src="/js/app.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                info: null
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }
        },
        filters: {
            decimal (value) {
                return value.toFixed(2)
            }
        },
        mounted () {
            axios
                .get('http://localhost:8088/dept-list')
                .then(response => (this.info = response.data))
                .catch(error => console.log(error))
        }
    })
</script>
</html>
